import { useState, useEffect } from 'react'

import TodoAdd from './components/context/TodoAdd'
import MainSection from './components/context/MainSection'
import TodoFooter from './components/context/TodoFooter'

import TodoContext from './TodoContext'

import './App.css'

function App () {
  const [todos, setTodos] = useState([
    { id: 1, text: '吃饭1', done: true },
    { id: 2, text: '睡觉1', done: false }
  ])

  const onAddTodo = (text: string) => {
    setTodos([
      ...todos,
      {
        id: todos.length + 1,
        text,
        done: false
      }
    ])
  }

  // 更改选中状态
  const onCheckedChange = (id: number) => {
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          done: !todo.done
        }
      } else {
        return todo
      }
    })

    setTodos(newTodos)
  }

  // 删除
  const onDeleteTodo = (id: number) => {
    const newTodos = todos.filter(todo => todo.id !== id)

    setTodos(newTodos)
  }

  /**
   * 功能：数据持久化到 localStorage 中
   *
   * 两件事：
   *  1. 组件加载时，读取 localStorage 中的数据，并渲染在组件中
   *  2. 任务数据改变时，将最新的数据，保存到 localStorage 中
   */

  // 启动时加载
  useEffect(() => {
    const res = localStorage.getItem('todos')
    if (res) {
      setTodos(JSON.parse(res))
    }
  }, [])

  // todos改变之后，保存到本地
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos))
  }, [todos])

  return (
    <section className='todoapp'>
      <TodoContext.Provider
        value={{
          todos,
          onAddTodo,
          onToggleTodo: onCheckedChange,
          onDeleteTodo
        }}
      >
        {/* 添加任务 */}
        <TodoAdd />
        {/* 中间内容 */}
        <MainSection></MainSection>
        {/* footer 组件 */}
        <TodoFooter />
      </TodoContext.Provider>
    </section>
  )
}

export default App
